<template>
  <div class="order">
    <no-login v-if="!$store.state.isLogin" icon="lock">
      <span slot="title">
        <span> {{ $t("noPermissionViewOrder") }}</span>
      </span>
    </no-login>
    <div v-else-if="$store.state.isLogin && $route.name === 'orders'">
      <van-tabs v-model="active" class="myTabs" animated>
        <van-tab :title="$t('applyTab')">
          <apply />
        </van-tab>
        <van-tab :title="$t('issueTab')">
          <issue />
        </van-tab>
      </van-tabs>
    </div>
    <router-view />
  </div>
</template>

<script>
import noLogin from 'components/content/nologin/nologin.vue';
import apply from './my-apply/my-apply.vue';
import issue from './my-issue/my-issue.vue';
import { List, Tab, Tabs } from 'vant';
import 'vant/lib/tabs/style/less';
import 'vant/lib/tab/style/less';

export default {
    name: 'order',
    components: {
        noLogin,
        apply,
        issue,
        [List.name]: List,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs
    },
    data () {
        return {
            active: 0,
            tabHeight: 0
        };
    }
};
</script>
